<template>
  <div class="btm-20">
    <Pictorial></Pictorial>
    <Banner :banners="banners"></Banner>
    <!-- <Card v :books="books"></Card> -->
    <div v-for="(item,index) in books" :key="index">
      <Card :book="item"></Card>
    </div>
    <div class="no-more" v-if="noMore">☺没有更多了</div>
  </div>
</template>

<script>
import Card from "@/components/card";
import Banner from "@/components/Banner";
import Pictorial from "@/components/Pictorial";
const db = wx.cloud.database();
export default {
  components: {
    Card,
    Banner,
    Pictorial
  },
  data() {
    return {
      books: [],
      banners: [],
      page: 0,
      noMore: false
    };
  },
  mounted() {
    this.getBooks(true);
    this.getBanner();
  },
  onPullDownRefresh() {
    // console.log("下拉刷新");
    this.getBooks(true);
    this.getBanner();
  },
  onReachBottom() {
    // console.log("bottom");
    if (!this.noMore) {
      this.page += 1;
      this.getBooks();
    }

    // 没有更多了
    return false;
  },
  methods: {
    async getBanner() {
      // 轮播图数据过滤
      // const banner = await
    },
    /**
     * 首页 获取图书 方法
     * init 初始化
     * 默认每页加载 9 条
     */
    async getBooks(init) {
      if (init) {
        this.page = 0;
        this.noMore = false;
      }
      wx.showNavigationBarLoading();
      wx.showLoading({ title: "加载中" });
      // const books = await db
      //   .collection("yidianBook")
      //   .orderBy("time", "desc")
      //   .skip(this.page * 9)
      //   .limit(9)
      //   .get();
      let books=await  wx.cloud.callFunction({
          name:'getbook',
          data:{
            page:this.page
          }
        })
      console.log(books.result.data);
      books=books.result
      // this.books = books.data;
      if (init) {
        this.books = books.data;
        this.banners = this.books;
        // console.log(this.banners)
        wx.stopPullDownRefresh();
      } else {
        // 下拉刷新，不能直接覆盖books 而是累加
        this.books = [...this.books, ...books.data];
      }
      if (books.data.length < 7 && this.page > 0) {
        this.noMore = true;
      }
      wx.hideLoading();
      wx.hideNavigationBarLoading();
    }
  }
};
</script>

<style>
.no-more {
  font-size: 11px;
  color: #999999;
  line-height: 36px;
  text-align: center;
}
</style>